import Events from '../Events'
import Ruler from '../Ruler'

class Board extends Events {
    constructor() {
        super();
        this.options = {
            color: 0xFFFFFF,
            width: 1920,
            height: 1080,
        };
        this.scale = 1;
        this.dom = null;
        this.Ruler = null;
        this.PIXIEvent = new PIXI.Application({
            antialias: true,
            transparent: true,
            resolution: 1
        });
        this.PIXIEvent.stage.interactive = true;
        this.PIXIEvent.stage.hitArea = new PIXI.Rectangle(0, 0, 300, 300);
        this.PIXIEvent.renderer.backgroundColor = 0x000000;
        this.PIXIEvent.renderer.autoDensity = true;
        this.PIXIEvent.renderer.plugins.interaction.cursorStyles.move = 'move';
        this.PIXIEvent.renderer.plugins.interaction.cursorStyles.seResize = 'se-resize';
        this.PIXIEvent.renderer.plugins.interaction.cursorStyles.pointer = 'pointer';
        // 界面组
        this.ContentGrounp = new PIXI.Container();
        this.ContentGrounp.interactive = true;
        this.ContentGrounp.sortableChildren = true;
        this.palette = new PIXI.Graphics();
        this.ContentGrounp.addChild(this.palette);
        this.PIXIEvent.stage.addChild(this.ContentGrounp);
        this.initEvent();
    }
    render(dom, horizontal, vertical) {
        this.dom = dom;
        this.Ruler = new Ruler(horizontal, vertical);
        this.dom.appendChild(this.PIXIEvent.view);
        this.zoom('0');
        this.setBoardSize();
    }
    resize() {
        var width = this.dom.clientWidth;
        var height = this.dom.clientHeight;
        this.PIXIEvent.renderer.resize(width, height);
        this.PIXIEvent.stage.hitArea = new PIXI.Rectangle(0, 0, width, height);
        this.position = [(width - (this.options.width * this.scale)) / 2, (height - (this.options.height * this.scale)) / 2];
        this.ContentGrounp.position.set(this.position[0], this.position[1]);
    }
    Move(dx, dy, status) {
        var width = this.dom.clientWidth;
        var height = this.dom.clientHeight;
        var x = this.position[0] + dx;
        var y = this.position[1] + dy;
        var minX = -(this.options.width * this.scale - width / 2);
        var maxX = width / 2;
        if (x < minX) x = minX;
        else if (x > maxX) x = maxX;
        var minY = -(this.options.height * this.scale - height / 2);
        var maxY = height / 2;
        if (y < minY) y = minY;
        else if (y > maxY) y = maxY;
        this.ContentGrounp.position.set(x, y);
        if (status) this.position = [x, y];
        this.Ruler.resize(width, height, x, y, this.scale);
    }
    setBoardSize() {
        this.palette.clear();
        this.palette.beginFill(this.options.color).lineStyle(1, 0xAAAAAA, 1).drawRect(0, 0, this.options.width, this.options.height).endFill();
    }
    zoom(type) {
        var width = this.dom.clientWidth;
        var height = this.dom.clientHeight;
        var OldScale = this.scale;
        if (type == '-') {
            this.scale -= this.scale * 0.2;
            if (this.scale < 0.2) this.scale = 0.2;
            let y1 = height / 2 - this.position[1];
            let y = this.position[1] + y1 - y1 / OldScale * this.scale;
            let x1 = width / 2 - this.position[0];
            let x = this.position[0] + x1 - x1 / OldScale * this.scale;
            this.position = [x, y]
            this.ContentGrounp.position.set(x, y);
        } else if (type == '=') {
            this.scale += this.scale * 0.2;
            if (this.scale > 10) this.scale = 10;
            let y1 = height / 2 - this.position[1];
            let y = this.position[1] + y1 - y1 / OldScale * this.scale;
            let x1 = width / 2 - this.position[0];
            let x = this.position[0] + x1 - x1 / OldScale * this.scale;
            this.position = [x, y]
            this.ContentGrounp.position.set(x, y);
        } else if (type == '0') {
            var Xscale = width / this.options.width;
            var Yscale = height / this.options.height;
            this.scale = Math.min(Xscale, Yscale) - 0.05;
            this.resize();
        }
        this.ContentGrounp.scale.set(this.scale, this.scale);
        this.Ruler.resize(width, height, this.position[0], this.position[1], this.scale);
    }
    add(item) {
        this.ContentGrounp.addChild(item.ContentGrounp);
    }
    remove(item) {
        this.ContentGrounp.removeChild(item.ContentGrounp);
    }
    initEvent() {
        this.moveCacheEvent = [];
        this.PIXIEvent.stage.on("pointerdown", (event) => {
            this.run('MouseDown', event);
        })
        this.PIXIEvent.stage.on("pointerup", (event) => {
            this.run('MouseUp', event);
        })
        this.PIXIEvent.stage.on("pointermove", (event) => {
            this.run('MouseMove', event);
        })
        // 添加动画监听事件
        this.PIXIEvent.ticker.add(this.AnimationEvent, this);
    }
    AnimationEvent(delta) {
        this.run('ticker', delta);
    }
    destroy() {
        this.PIXIEvent.ticker.remove(this.AnimationEvent, this);
        this.PIXIEvent.destroy(true, true);
    }
    getFormOption() { }
    getValue() { }
}


export default Board;

